<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

interface RegisterForm {
  username: string
  pwd: string
  age: number
  realName: string
  email: string
  stuNum: string
  className: string
}

const registerForm = ref<RegisterForm>({
  username: '',
  pwd: '',
  age: 0,
  realName: '',
  email: '',
  stuNum: '',
  className: '',
})

const error = ref<string>('')
const successMessage = ref<string>('')
const router = useRouter()

const validateForm = (): boolean => {
  const form = registerForm.value
  if (form.username.length < 3) {
    error.value = '用户名长度至少为 3 位'
    return false
  }
  if (form.pwd.length < 6) {
    error.value = '密码长度至少为 6 位'
    return false
  }
  if (form.age <= 0 || form.age > 100) {
    error.value = '请输入有效的年龄（1-100）'
    return false
  }
  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!emailPattern.test(form.email)) {
    error.value = '请输入有效的邮箱地址'
    return false
  }
  if (!form.realName.trim()) {
    error.value = '请输入真实姓名'
    return false
  }
  if (!form.stuNum.trim()) {
    error.value = '请输入学号'
    return false
  }
  if (!form.className.trim()) {
    error.value = '请输入班级'
    return false
  }
  return true
}
const apiBase = import.meta.env.VITE_API_BASE_URL
const handleRegister = async () => {
  error.value = ''
  successMessage.value = ''
  if (!validateForm()) return

  try {
   const response = await axios.post(`${apiBase}/demo/reg`, registerForm.value, {
  timeout: 5000,
})
successMessage.value = response.data?.message || '注册成功，正在跳转登录页面...'
    setTimeout(() => {
      router.push('/login')
    }, 1500)
  } catch (err: any) {
    error.value = err.response?.data?.message || '注册失败，请检查输入信息或服务器'
  }
}
</script>

<template>
  <div class="form-container">
    <h2>注册账号</h2>
    <form @submit.prevent="handleRegister">
      <div class="form-row">
        <div class="form-group">
          <label>用户名</label>
          <input v-model="registerForm.username" type="text" required />
        </div>
        <div class="form-group">
          <label>密码</label>
          <input v-model="registerForm.pwd" type="password" required />
        </div>
      </div>
      
      <div class="form-row">
        <div class="form-group">
          <label>年龄</label>
          <input v-model.number="registerForm.age" type="number" required />
        </div>
        <div class="form-group">
          <label>真实姓名</label>
          <input v-model="registerForm.realName" type="text" required />
        </div>
      </div>
      
      <div class="form-row">
        <div class="form-group">
          <label>邮箱</label>
          <input v-model="registerForm.email" type="email" required />
        </div>
        <div class="form-group">
          <label>学号</label>
          <input v-model="registerForm.stuNum" type="text" required />
        </div>
      </div>
      
      <div class="form-group">
        <label>班级</label>
        <input v-model="registerForm.className" type="text" required />
      </div>
      
      <div v-if="error" class="error">{{ error }}</div>
      <div v-if="successMessage" class="success">{{ successMessage }}</div>
      
      <button type="submit">立即注册</button>
    </form>
    
    <p class="text-center mt-4">
      已有账号？<router-link to="/login" class="link">立即登录</router-link>
    </p>
  </div>
</template>

.form-container {
  max-width: 400px;
  margin: 2rem auto;
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fdfdfd;
}

.form-group {
  margin-bottom: 1rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #333;
}

input {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  background-color: #007bff; /* 蓝色 */
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0069d9; /* 深蓝 */
}

.text-center {
  text-align: center;
}

.mt-4 {
  margin-top: 1rem;
}

.error {
  color: #e74c3c;
  margin: 0.5rem 0;
}

.success {
  color: #007bff; /* 蓝色成功提示 */
  margin: 0.5rem 0;
}

.link {
  color: #007bff;
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}
